<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Lazyframework-Generator</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <style type="text/css">
    body {
      margin: 0;
      font-family: Consolas, '微软雅黑', sans-serif;
    }

    .header {
      height: 60px;
      line-height: 60px;
      background: rgb(151, 211, 151);
      margin: 0;
    }

    .header h1 {
      text-align: center;
      color: aliceblue;
    }

    .container {
      position: static;
      width: 80%;
      min-width: 1200px;
      margin: 20px auto;
      padding: 0 20px;
    }

    .sidebar {
      margin: 0;
      width: 320px;
      position: absolute;
      border: 1px solid #ccc;
      border-radius: 3px;
      padding: 15px 10px;
    }

    .sidebar>li {
      list-style: none;
      margin-right: 10px;
      line-height: 45px;
    }

    .sidebar li>span {
      width: 100px;
      font-size: 14px;
      display: inline-block;
    }

    .sidebar input[type=text],
    .sidebar select {
      padding: 8px 5px;
      border-radius: 3px;
      border: 1px solid #ccc;
      width: 190px;
    }

    select {
      border: solid 1px #000;
      appearance: none;
      -moz-appearance: none;
      -webkit-appearance: none;
      padding-right: 18px;
      background: url("./arrow.png") no-repeat scroll right center transparent;
    }

    select::-ms-expand {
      display: none;
    }

    #generate {
      background: green;
      border: 1px solid green;
      border-radius: 3px;
      color: aliceblue;
      padding: 8px 10px;
      font-size: 14px;
      float: right;
      margin-right: 10px;
      cursor: pointer;
    }

    .content {
      padding-left: 360px;
    }

    table {
      width: 100%;
    }

    table tr {
      height: 40px;
    }

    table tr td {
      border-bottom: 1px solid #eee;
    }

    table thead th {
      background: rgb(224, 224, 224);
    }

    table th, table td {
      text-align: left;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>Welcome use Lazyframework-Generator!</h1>
  </div>

  <div class="container">
    <ul class="sidebar">
      <li><span>DataBases</span><select id="schemas" style="width: 202px"><option>请选择数据库</option></select></li>
      <li><span>ProjectName</span><input type="text" name="projectName" placeholder="simple-project"></li>
      <li><span>BasePackage</span><input type="text" name="basePackage" placeholder="com.maonings.demo"></li>
      <li><span>Module</span><input type="text" name="module" placeholder=""></li>
      <li style="margin-top: 10px">
        <label><input type="checkbox" name="removeTablePrefix" checked> 移除表前缀</label>
        <button id="generate">Generate</button>
      </li>
    </ul>

    <div class="content">
      <table class="tab-list" cellpadding="0" cellspacing="0">
        <thead>
          <tr>
            <th style='text-align: center; width: 40px;'><input type="checkbox" id="check-all-table"/></th>
            <th style='text-align: center; width: 100px;'>序号</th>
            <th>表名</th>
            <th>注释</th>
          </tr>
        </thead>
        <tbody id="tables"></tbody>
      </table>
    </div>

  </div>

  <script type="text/javascript">
    $.get("schema/info", function (res) {
      if (res.code === 200) {
        var data = res.data;
        var options = "";
        for (var i = 0; i < data.length; i++) {
          var dbName = data[i].name;
          if (dbName === 'mysql') {
            options += "<option selected value='" + dbName + "'>" + dbName + "</option>";
            renderTables(dbName);
          } else {
            options += "<option value='" + dbName + "'>" + dbName + "</option>";
          }
        }
        $("#schemas").append(options);
      }
    });

    $("#schemas").on("change", function () {
      renderTables($(this).val());
    });

    $("#check-all-table").on("change", function () {
      var checkAll = document.getElementById("check-all-table").checked;
      $("input:checkbox[name='tables']").prop("checked", checkAll);
    });

    $("#generate").on("click", function () {
      generate();
    });

    function generate() {
      var tables = [];
      $("input[name='tables']:checked").each(function () {
        tables.push($(this).val());
      });
      if (tables.length === 0) {
        alert("请至少选择一张表");
        return;
      }
      var projectName = $("input:text[name='projectName']").val();
      var basePackage = $("input:text[name='basePackage']").val();
      var module = $("input:text[name='module']").val();
      var removeTablePrefix = $("input:checkbox[name='removeTablePrefix']").is(':checked');
      $.ajax({
        url: "/generate",
        type: "POST",
        data: JSON.stringify({
          tables: tables.join(","),
          schema: $("#schemas").val(),
          projectName: projectName || "simple-project",
          basePackage: basePackage || "com.maonings.demo",
          module: module,
          removeTablePrefix: removeTablePrefix
        }),
        contentType: "application/json",
        success: function (res) {
          if (res.code === 200) {
            alert(res.data);
          } else {
            alert("Generate fail!");
          }
        }
      });
    }

    function renderTables(schema) {
      $.get("schema/info/" + schema + "/tables", function (res) {
        if (res.code === 200) {
          var data = res.data;
          var trs = "";
          for (var i = 0; i < data.length; i++) {
            trs +=
              "<tr>" +
              "<td style='text-align: center;'><input type='checkbox' name='tables' value='" + data[i].name + "'/></td>" +
              "<td style='text-align: center;'>" + (i + 1) + "</td>" +
              "<td>" + data[i].name + "</td>" +
              "<td>" + data[i].comment + "</td>"
            "</tr>";
          }
          $("#tables").html(trs);
        }
      });
    }
  </script>
</body>

</html>